<html lang="en">
  <!-- 准备一个有输入属性的标签 -->
  <input type="text" id="input">
</html>
<!-- 模拟双向数据绑定 -->
<script>
  // 准备数据
  let data = {
    name: '', 
  }
  let v_name = ''
  Object.defineProperty(data, 'name', {
    // 数据劫持
    get() {
      console.log('我data.name被获取了')
      return v_name
    },
    // 数据发生改变触发
    set(newValue) {
      console.log('我data.name被改变了')
      console.log('我变成了', newValue)
      // 数据层发生改变 视图层也需要同步改变
      document.getElementById('input').value = newValue
      v_name = newValue
    }
  })
  // 视图层数据发生改变（用户的输入）数据层发生改变
  document.getElementById('input').addEventListener('input', e => {
    data.name = e.target.value
    console.log('视图层数据发生改变（用户的输入）数据层发生改变', data.name)
  })
</script>